/**
* Created by icely on 2017/3/15.
*/
<template>
    <div class="historyOrderContainer routerContent">
        <div class="noHistoryList" v-if="noHistoryList">暂无任何订单</div>
        <scroller lock-x ref="scroller" scrollbar-y use-pullup :pullup-config="pullupConfig"
                  @on-pullup-loading="OrderHistoryListLoadMore" v-model="orderHistoryStatus">
            <div class="historyOrderContent">
                <div class="orderBox" v-for="item in orderHistoryList" @click="goOrderInfo($event,item)">
                    <div class="orderBox-header bfcClass" @click.stop="doXStore(item)">
                    <span class="floatLeft">
                        <img class="orderBox-header-img" :src="item.stStoreImg | urlFilterAddServer">
                        <span class="orderBox-icon-right">{{ item.stStoreName }} </span>
                    </span>
                        <span class="floatRight">
                        <span class="orange">{{ item.order_status | orderStatusFilter}}</span>
                    </span>
                    </div>

                    <div class="orderBox-body">

                        <div class="commonRow">
                            <div class="col-2">
                                <img v-if="item.Package.length > 0"
                                     :src="item.Package[0].packageImg | urlFilterAddServer">
                            </div>
                            <div class="col-6">
                                <div v-if="item.Package.length > 0">{{ item.Package[0].packageName }}</div>
                                <div class="food_num">共 {{item.Package.length}} 个菜品</div>
                            </div>
                            <div class="col-4 textAlignCenter">实付￥{{ item.price}}</div>

                        </div>
                    </div>

                    <div class="orderBox-footer textAlignRight">
                        <button class="doPayOrder" @click.stop="doPayOrder(item)" v-if="item.order_status == '0'">支付
                        </button>
                        <button class="doCancelOrder" @click.stop="doCancelOrder(item,3)"
                                v-if="item.order_status == '0'">
                            取消订单
                        </button>
                        <button class="doDeleteOrder" @click.stop="doDeleteOrder(item,4)"
                                v-if="item.order_status == '3' || item.order_status == '5'">删除
                        </button>
                        <button class="doReCreateOrder" @click.stop="doReCreateOrder(item)"
                                v-if="item.order_status == '3' || item.order_status == '5'">
                            重新下单
                        </button>
                        <button class="doAppraiseOrder" @click.stop="doOrderAssess(item,item.appraise)"
                                v-if="item.order_status == '2' && item.appraise == '0'">评价
                        </button>
                        <!--<button class="doAppraiseOrder" @click.stop="doOrderAssess(item,item.appraise)"-->
                        <!--v-if="item.order_status == '2' && item.appraise == '1'">查看评价-->
                        <!--</button>-->
                        <button class="orangeBtn" @click.stop="doOrderPayAgain(item)" v-if="item.order_status == '2'">
                            再来一单
                        </button>
                    </div>
                </div>
            </div>
        </scroller>
        <confirm v-model="orderConfirmShow" :title="orderConfirmShowText"
                 @on-cancel="onOrderCancel"
                 @on-confirm="onOrderConfirm">
        </confirm>
    </div>
</template>

<script>
    import {Group, Cell, Confirm, XHeader, Scroller} from 'vux'

    import {mapState, mapActions} from 'vuex'

    import {TestLoginService, getOrderHistoryService, PostComfirmOrderService, orderCreate} from '../services/index'

    export default {
        components: {
            Group,
            Cell,
            Confirm,
            XHeader,
            Scroller,

        },
        data: function () {
            return {
                orderConfirmShowText: '',
                orderConfirmShow: false,
                orderItemObj: {},
                orderDoAction: 2,
                orderHistory: {},
                orderHistoryList: [],
                /*上拉加载配置*/
                pullupConfig: {
                    content: '',
                    downContent: '松开进行加载',
                    upContent: '上拉加载更多',
                    loadingContent: '加载中...'
                },
                orderHistoryStatus: {
                    pullupStatus: 'default'
                },
                getHistoryObj: {
                    pageSize: 10,
                    pageNo: 0
                },
                noHistoryList: false,
                offsetY: 0
            }
        },
        computed: {},
        activated(){
            this.$nextTick(() => {
                this.$refs.scroller.reset({
                    top: Math.abs(this.offsetY)
                })
            })
            this.getHistoryObj.pageNo = 0;
            this.orderHistoryList = [];
            this.getOrderHistoryList();
        },
        mounted(){
//            this.getOrderHistoryList();
        },
        watch: {},
        methods: {
            ...mapActions([
                'updateStoreId',
                'updateDiningModeType',
                'updateBookingTime'
            ]),
            orderConfirmShowFuc(info){
                this.orderConfirmShow = true;
                this.orderConfirmShowText = info;
            },
            goOrderInfo(e, item){
                this.offsetY = e.offsetY;
                if (item.orderId) {
                    this.$router.push({
                        name: 'orderInfo',
                        query: {
                            orderId: item.orderId,
                        },
                        params: {
                            orderId: item.orderId,
                            stStoreName: item.stStoreName,
                            stStoreImg: item.stStoreImg,
                        }
                    })
                }
            },
            OrderHistoryListLoadMore(){
                this.getOrderHistoryList();
                setTimeout(() => {
                    this.$refs.scroller.donePullup()
                }, 10)
            },
            getOrderHistoryList(){
                const params = {
                    pageSize: this.getHistoryObj.pageSize,
                    pageNo: ++this.getHistoryObj.pageNo
                };
                getOrderHistoryService().save(params).then((res) => {
                    const body = res.body;
                    if (body && body.code == 200) {
                        this.orderHistory = body.data;
                        this.orderHistoryList = this.orderHistoryList.concat(body.data.list);
                        if (this.orderHistoryList.length == 0) {
                            this.noHistoryList = true;
                            this.orderHistoryStatus.pullupStatus = 'disabled';
                        } else {
                            this.noHistoryList = false;
                            if (this.orderHistory.lastPage) {
                                this.orderHistoryStatus.pullupStatus = 'disabled';
                            } else {
                                this.orderHistoryStatus.pullupStatus = 'enabled';
                            }
                        }
                    } else {
                        this.noHistoryList = true;
                        this.orderHistoryStatus.pullupStatus = 'disabled';
                    }
                });
            },
            doXStore(item){
                if (item.stStoreId) {
                    window.localStorage.setItem("stStoreId", item.stStoreId);
                    this.updateStoreId(item.stStoreId);
                    this.$router.push({
                        name: 'setTakeTime',
                        query: {
                            stStoreId: item.stStoreId,
                        }
                    })
                }
            },
            doPayOrder(item){
                if (item.dineWay == '0') {
                    this.updateDiningModeType(true);
                    this.updateBookingTime(item.bookingTime);
                }
                if (item.orderId) {
                    this.$router.push({
                        name: 'orderConfirm',
                        query: {
                            orderId: item.orderId,
                            stStoreId: item.stStoreId
                        }
                    })
                }
            },
            doCancelOrder(item, flag){
                this.orderDoAction = 2;
                this.orderItemObj.item = item;
                this.orderItemObj.flag = flag;
                this.orderConfirmShowFuc('确定取消?');

            },
            doDeleteOrder(item, flag){
                this.orderDoAction = 3;
                this.orderItemObj.item = item;
                this.orderItemObj.flag = flag;
                this.orderConfirmShowFuc('确定删除?');

            },
            doReCreateOrder(item){
                if (item.orderId) {
                    this.$router.push({
                        path: "setTakeTime",
                        query: {
                            stStoreId: item.stStoreId,
                        }
                    })
                }
            },
            doOrderPayAgain(item){
                if (item.orderId) {
                    this.$router.push({
                        path: "/",
                        query: {
                            stStoreId: item.stStoreId,
                        }
                    })
                }
            },
            doOrderAssess(item, appraise){
                this.$router.push({
                    name: 'assess',
                    query: {
                        orderId: item.orderId,
                        appraise: appraise
                    },
                })
            },
            onOrderAction(){
                const item = this.orderItemObj.item;
                const flag = this.orderItemObj.flag;
                if (item.orderId) {
                    PostComfirmOrderService().save({orderId: item.orderId, flag: flag, orderMethod:"0"}).then((res) => {
                        const body = res.body;
                        if (body && body.code == 200) {
                            this.getHistoryObj.pageNo = 0;
                            this.orderHistoryList = [];
                            this.getOrderHistoryList();
                        }
                    })
                }
            },
            onOrderConfirm(){
                this.onOrderAction();
            },
            onOrderCancel(){
                this.orderConfirmShow = false;
            },

        },
        created(){

        },
        updated(){
            this.$nextTick(() => {
                this.$refs.scroller.reset()
            })
        },
    }
</script>

<style lang="less" rel="stylesheet/less">

    .historyOrderContainer {

        background: rgb(238, 238, 238);
        .noHistoryList {
            text-align: center;
            padding: 10px;
        }
        .orderBox-icon-right {
            background: url("../assets/img/icon-right.png") no-repeat right center;
            background-size: 0.45rem 0.75rem;
            padding-right: 1rem;
        }
        * {
            font-size: 0.8rem;
        }

        .rotate {
            display: inline-block;
            transform: rotate(-180deg);
        }
        .pullup-arrow {
            transition: all linear 0.2s;
            color: #666;
            font-size: 25px;
        }
        .orderBox {
            margin-bottom: 0.2rem;
            padding: 0rem 0rem 0.2rem 0rem;

            > * {
                width: 100%;
                padding: 0.5rem 1rem;
            }

            .orderBox-header,
            .historyOrderContainer .orderBox-footer {
                background: #ffffff;
            }

            .orderBox-header {

                .orderBox-header-img {
                    width: 1rem;
                    height: 1rem;
                }

                > span > * {
                    font-size: 0.6rem;
                    display: inline-block;
                    vertical-align: middle;
                }
                span.orange {
                    color: rgb(238, 113, 73);
                }
            }

            .orderBox-body {
                background-color: white;
                border-top: 1px solid #dfdfdf;
                .commonRow {
                    margin: 0.1rem 0rem;
                    font-size: 0.8rem;

                    [class^='col-'] {
                        vertical-align: middle;

                        img {
                            width: 100%;
                            height: 1.5rem
                        }
                        .food_num {
                            font-size: 0.6rem;
                            color: #999;
                            margin-top: 0.25rem;
                        }
                    }
                }
            }
            .orderBox-footer {
                background-color: #fff;
                overflow: hidden;
                span {
                    float: left;
                    display: inline-block;
                    padding-top: 0.15rem;
                    font-size: 1rem;
                    color: red;
                }
                .doCancelOrder {
                    border: #fd8672;
                    color: white;
                    background: #fd8672;
                    width: 4.5rem;
                }
                .doPayOrder {
                    border: 1px solid #fd8672;
                    color: #fd8672;
                    width: 4.5rem;
                }
                .doDeleteOrder {
                    border: 1px solid #fd8672;
                    color: #fd8672;
                    width: 4.5rem;
                }
                .doReCreateOrder {
                    border: #fd8672;
                    color: white;
                    background: #fd8672;
                    width: 4.5rem;
                }
            }
        }
    }

</style>

